<template>
  <div class="login-container">
    <div class="ope-area">
      <div class="title">静宁县特殊教育学校送教上门管理系统</div>
      <div class="second-line">
        <div class="left-img"></div>
        <div class="form-container">
          <div class="form-area">
            <div class="form-title">用户登录</div>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
              label-position="left">
              <el-form-item prop="username">
                <span class="svg-container">
                  <svg-icon icon-class="user" />
                </span>
                <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text"
                  tabindex="1" auto-complete="on" />
              </el-form-item>

              <el-form-item prop="password">
                <span class="svg-container">
                  <svg-icon icon-class="password" />
                </span>
                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
                  placeholder="请输入密码" name="password" tabindex="2" auto-complete="on"
                  @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
              </el-form-item>

              <el-form-item v-if="showVerify" prop="code">
                <span class="svg-container">
                  <svg-icon icon-class="guide" />
                </span>
                <el-input ref="code" v-model="loginForm.code" placeholder="请输入验证码" name="code" type="text"
                  tabindex="3" />
                <img class="code-img" :src="codeUrl" alt="" @click="getVerify">
              </el-form-item>

              <el-button :loading="loading" type="primary" style="width: 100%" @click.native.prevent="handleLogin">登 录
              </el-button>
            </el-form>
          </div>
        </div>
      </div>

    </div>

    <!-- <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码至少6位字符'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入用户名' }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      showVerify: false,
      codeUrl:
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4160572592,2121035394&fm=26&gp=0.jpg'
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    getVerify() {
      this.clientId = `${Math.ceil(Math.random() * 100000)}${Date.now()}`
      this.$store
        .dispatch('user/getVerify', {
          clientId: this.clientId,
          width: 120,
          height: 40
        })
        .then((res) => {
          this.codeUrl = res
        })
        .catch(() => { })
    },
    handleLogin() {
      const that = this
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = JSON.parse(JSON.stringify(this.loginForm))
          params.username = this.loginForm.username.trim()
          if (this.showVerify) {
            if (!this.loginForm.code) {
              this.$message.error('请输入图片验证码中的四位字符')
              return false
            }
            params.captcha = {
              clientId: this.clientId,
              code: this.loginForm.code
            }
            delete params.code
          }
          this.$store
            .dispatch('user/login', params)
            .then((res) => {
              this.loading = false
              if (res && res.desc) {
                this.$message.error(res.desc)
              } else {
                that.$router.push({
                  path: '/home'
                })
              }
            })
            .catch((err) => {
              this.loading = false
              if (err.code) {
                if (err.code === 950) {
                  if (err.desc === '验证码不能为空') {
                    this.$message.error(
                      '由于您多次输错密码，接下来登录需要输入验证码'
                    )
                    this.showVerify = true
                    this.getVerify()
                  } else if (err.desc === '验证码错误') {
                    this.$message.error(err.desc)
                    this.getVerify()
                  } else {
                    this.$message.error(err.desc)
                  }
                }
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #498ffb;

.login-container {
  background-color: $bg;
  background-image: url(../../assets/lt-bg.png), url(../../assets/rt-bg.png),
    url(../../assets/rb-bg.png);
  background-size: 614px 682px, 460px 550px, 688px 552px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom right;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .ope-area {
    width: 80vw;
    height: 80vh;
    margin-top: 10vh;

    >.title {
      color: #fff;
      line-height: 50px;
      font-size: 36px;
      text-align: center;
      letter-spacing: 5px;
      margin-bottom: 50px;
    }

    .second-line {
      display: flex;
      width: 100%;

      .left-img {
        flex: 1;
        background-image: url(../../assets/login-logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

      .form-container {
        width: 420px;

        >.form-area {
          background: #fff;
          border-radius: 32px;

          .form-title {
            padding: 75px 0 40px 0;
            color: #049aef;
            line-height: 40px;
            font-size: 28px;
            text-align: center;
          }

          .login-form {
            width: 315px;
            margin: 0 auto;

            .el-form-item {
              margin-bottom: 20px;

              .el-form-item__content {
                position: relative;

                .svg-container {
                  position: absolute;
                  z-index: 1;
                  top: 0;
                  left: 16px;
                  line-height: 40px;
                  color: #b3b3b3;
                }

                .show-pwd {
                  position: absolute;
                  z-index: 1;
                  top: 0;
                  right: 16px;
                  line-height: 40px;
                  color: #b3b3b3;
                }

                .code-img {
                  position: absolute;
                  top: 2px;
                  right: 2px;
                  width: 120px;
                  height: 36px;
                  border-radius: 0 20px 20px 0;
                }
              }
            }

            ::v-deep .el-input__inner {
              background: #fff;
              border-radius: 20px;
              height: 40px;
              line-height: 40px;
              border: 2px solid #e5e5e5;
              padding-left: 40px;

              &:focus {
                border: 2px solid #049aef;
              }

              &:hover {
                border: 2px solid #049aef;
              }

              &::-webkit-input-placeholder {
                color: #666;
              }

              &::-moz-placeholder {
                color: #666;
              }

              &::-moz-placeholder {
                color: #666;
              }

              &:-ms-input-placeholder {
                color: #666;
              }
            }

            .el-button.el-button--primary {
              margin-top: 20px;
              height: 36px;
              line-height: 36px;
              padding: 0;
              border-radius: 18px;
              font-weight: 500;
              letter-spacing: 10px;
              margin-bottom: 80px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
